import React, { Component } from "react";

import { connect } from "react-redux";

const mapStateToProps = (state) => {
  return {
    count: state.get("count"),
    list: state.get("list"),
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    add() {
      dispatch({
        type: "add",
      });
    },
    minus() {
      dispatch({
        type: "minus",
      });
    },
    push(payload) {
      dispatch({
        type: "push",
        payload,
      });
    },
  };
};

@connect(mapStateToProps, mapDispatchToProps)
class App extends Component {
  state = {
    textValue: "",
  };

  handleChange = (e) => {
    this.setState({
      textValue: e.target.value,
    });
  };

  fn = () => {
    this.props.push({
      id: new Date().getTime(),
      name: this.state.textValue,
    });
  };

  render() {
    console.log(this.props);
    return (
      <>
        <h3>redux-immutable</h3>
        <button onClick={this.props.minus}>-</button>
        <span>{this.props.count}</span>
        <button onClick={this.props.add}>+</button>

        <hr />

        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange}
        />
        <button onClick={this.fn}>添加</button>
        <ul>
          {this.props.list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
